<template>
	<div class="problem" v-if="problem">
		<header class="header">
			<div class="title">
				<h1>{{ problem.finalTitle }}</h1>
			</div>

			<div class="content">
				<span>
					{{ $t('timeLimit') }} : 
					<span class="timeLimit" v-html="problem.timeLimit"></span>
				</span>
				<span>{{ $t('memoryLimit') }} : 
					<span class="timeLimit" v-html="problem.memoryLimit"></span>
				</span>
				<span>
					{{ $t('result.accepted') }}：
					<RouterLink :to="'/status?problemId=' + problem.id + '&status=4'">
						{{ problem.accepted }}
					</RouterLink>
					 / 
					<RouterLink :to="'/status?problemId=' + problem.id">
						{{ problem.submit }}
					</RouterLink>
				</span>
				<span v-if="problem.my">
					{{ $t('my') }}：
					<RouterLink :to="'/status?problemId=' + problem.id + '&status=4' + '&userId=' + problem.my.id">
						{{ problem.my.accepted }}
					</RouterLink>
					 / 
					<RouterLink :to="'/status?problemId=' + problem.id + '&userId=' + problem.my.id">
						{{ problem.my.submit }}
					</RouterLink>
				</span>
			</div>
		</header>


		<div class="card description-card">
			<div class="title">
				<h3>{{ $t('problem.description') }}</h3>
			</div>

			<div class="content" v-html="problem.description"></div>
		</div>



		<div class="card input-description-card">
			<div class="title">
				<h3>{{ $t('input.description') }}</h3>
			</div>

			<div class="content" v-html="problem.input"></div>
		</div>

		<div class="card output-descriprion-card">
			<div class="title">
				<h3>{{ $t('output.description') }}</h3>
			</div>

			<div class="content" v-html="problem.output"></div>
		</div>


		<div>
			<div class="card sample-input-card">
				<div class="title">
					<h3>{{ $t('sample.input') }}</h3>
				</div>

				<pre class="content">{{ problem.sampleInput }}</pre>
			</div>

			
			<div class="card sample-output-card">
				<div class="title">
					<h3>{{ $t('sample.output') }}</h3>
				</div>

				<pre class="content">{{ problem.sampleOutput }}</pre>
			</div>
		</div>



		<div class="card tips-card">
			<div class="title">
				<h3>{{ $t('hint') }}</h3>
			</div>

			<div class="content">
				{{ problem.hint }}
			</div>
		</div>



		<div class="card source-card">
			<div class="title">
				<h3>{{ $t('source') }}</h3>
			</div>

			<div class="content">
				<RouterLink :to="'/problems?source=' + problem.source">{{ problem.source }}</RouterLink>
			</div>
		</div>


		<div class="card tags-card">
			<div class="title">
				<h3>{{ $t('tag') }}</h3>
			</div>

			<div class="content">
				<RouterLink v-for="tag in problem.tags" :to="'/problems?tag=' + tag">
					#{{ $t('problem.' + tag) }}
				</RouterLink>
			</div>
		</div>
	</div>
</template>


<style scoped>
	.card {
		padding: 10px 0;
		border: none;
	}

	.card > .title {
		margin-bottom: 10px;

		font-size: 24px;
	}








	.problem {
		
	}

	.problem > header > .title,
	.problem > header > .content {
		text-align: center;
	}

	.problem > header > .title {
		margin-top: 20px;
		margin-bottom: 10px;
	}

	.problem > header > .content {
		padding: 15px;

		border: 1px #ddd solid;
		box-sizing: border-box;
	}

	.problem > header > .content > span {
		padding: 0 8px;
	}

	.problem > header > .content > span > .timeLimit {
		padding-left: 8px;
	}

	.problem > header > .content > span > .timeLimit:first-child {
		padding-left: 0;
	}


	.card > .content > p {
		margin: 0 0 10px !important;
	}

	
	pre {
		overflow: auto;
		display: block;
		padding: 9.5px;
		margin: 0 0 10px;
		font-size: 16px;
		line-height: 1.42857143;
		color: #333;
		word-break: break-all;
		word-wrap: break-word;
		background-color: #f5f5f5;
		border: 1px solid #ccc;
	}
</style>

<script type="module">
	export default {
		name: 'problem',
		props: ['problem'],
	}
</script>